<template>
  <div>
    <!--********************导航菜单********************* -->
    <el-menu
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-row type="flex" justify="end">
         <el-col :span="2">
          <el-menu-item index="myborrow">
            <i class="el-icon-shopping-cart-2"></i>借阅记录
            <el-badge class="item"></el-badge>
          </el-menu-item>
        </el-col>
        <el-col :span="3">
          <el-menu-item index="borCart">
            <i class="el-icon-shopping-cart-2"></i>我的借阅车
            <el-badge class="item" :value="this.$store.getters.cartNum"></el-badge>
          </el-menu-item>
        </el-col>
        <el-col :span="2">
          <el-menu-item index="profile">
            <i class="el-icon-s-custom"></i>个人信息
          </el-menu-item>
        </el-col>
        <el-col :span="2">
          <el-menu-item index="index">
            <i class="el-icon-s-tools"></i>退出系统
          </el-menu-item>
        </el-col>
      </el-row>
    </el-menu>
    <!--******************** 嵌套路由出口：首页，我的借阅车，个人信息 ********************* -->
    <router-view></router-view>
  </div>
</template>
<script>
import {
  listBorcart,
  getBorcart,
  delBorcart,
  addBorcart,
  updateBorcart
} from "@/api/system/borcart";
import { getInfo } from "@/api/login";

export default {
  data() {
    return {
      // 查询参数
      queryParamsCart: {
        pageNum: 1,
        pageSize: 1000,
        userId: null,
        archivesId: null
      },
    };
  },
  created() {
    this.$store.dispatch("GetInfo"); // 获取头像数据
    // 跳转客户端首页
    this.$router.push({ path: "/client/home" });
    // 获取购物车数据
    getInfo().then(res => {
      this.queryParamsCart.userId = res.user.userId;
      this.getListCart();
    });
  },

  methods: {
    // 菜单选择
    handleSelect(key, keyPath) {
      if (key == "myborrow") {
        // 跳转借阅记录
        this.$router.push({ path: "/client/myborrow" });
      }else if (key == "borCart") {
        // 跳转客户端首页
        this.$router.push({ path: "/client/home" });
        // 跳转借阅车
        this.$store.commit("SET_CART_STATE", true);
        //this.$router.push({ path: "/client/borCart" });
      } else if (key == "profile") {
        // 跳转个人信息
        this.$router.push({ path: "/client/profile" });
      } else if (key == "index") {
        // 跳转登录界面
        this.$router.push({ path: "/" });
      }
    },
    // 获取借阅车数据
    getListCart() {
      this.loading = true;
      listBorcart(this.queryParamsCart).then(response => {
        this.$store.commit('SET_CART_NUM', response.total)
        this.loading = false;
      });
    }
  }
};
</script>